import React from 'react';
import { Card, Table, Button, Space, Input, Form, Select, Tag, Modal, message, Tabs } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

const { Option } = Select;
const { TextArea } = Input;
const { TabPane } = Tabs;

interface InterfaceRecord {
  id: string;
  name: string;
  path: string;
  method: string;
  description: string;
  status: string;
  version: string;
  createTime: string;
  updateTime: string;
}

const InterfaceManagement: React.FC = () => {
  const [form] = Form.useForm();
  const [modalForm] = Form.useForm();
  const [modalVisible, setModalVisible] = React.useState(false);
  const [editingRecord, setEditingRecord] = React.useState<InterfaceRecord | null>(null);

  const handleSearch = () => {
    form.validateFields().then(values => {
      console.log('Search values:', values);
    });
  };

  const handleReset = () => {
    form.resetFields();
  };

  const handleAdd = () => {
    setEditingRecord(null);
    modalForm.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (record: InterfaceRecord) => {
    setEditingRecord(record);
    modalForm.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleModalOk = () => {
    modalForm.validateFields().then(values => {
      console.log('Form values:', values);
      message.success(`${editingRecord ? '修改' : '新增'}成功`);
      setModalVisible(false);
    });
  };

  const columns: ColumnsType<InterfaceRecord> = [
    {
      title: '接口ID',
      dataIndex: 'id',
      key: 'id',
      width: 120,
      ellipsis: true,
    },
    {
      title: '接口名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      ellipsis: true,
    },
    {
      title: '接口路径',
      dataIndex: 'path',
      key: 'path',
      width: 200,
      ellipsis: true,
    },
    {
      title: '请求方式',
      dataIndex: 'method',
      key: 'method',
      width: 100,
      render: (method: string) => {
        const colorMap: { [key: string]: string } = {
          GET: 'blue',
          POST: 'green',
          PUT: 'orange',
          DELETE: 'red',
        };
        return <Tag color={colorMap[method]}>{method}</Tag>;
      },
    },
    {
      title: '接口描述',
      dataIndex: 'description',
      key: 'description',
      width: 200,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => {
        const color = status === 'online' ? 'success' : 'error';
        const text = status === 'online' ? '已发布' : '未发布';
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
      width: 100,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 160,
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      width: 160,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 200,
      render: (_: unknown, record: InterfaceRecord) => (
        <Space size="middle">
          <Button type="link" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link">
            调试
          </Button>
          <Button type="link" danger>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const mockData: InterfaceRecord[] = [
    {
      id: 'API-001',
      name: '新增连接器',
      path: '/api/v1/connectors',
      method: 'POST',
      description: '创建新的连接器配置',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 10:30:00',
      updateTime: '2024-01-20 10:30:00',
    },
    {
      id: 'API-002',
      name: '修改连接器',
      path: '/api/v1/connectors/{id}',
      method: 'PUT',
      description: '更新指定连接器的配置信息',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 10:29:55',
      updateTime: '2024-01-20 15:45:30',
    },
    {
      id: 'API-003',
      name: '新增数据产品',
      path: '/api/v1/products',
      method: 'POST',
      description: '创建新的数据产品',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 11:00:00',
      updateTime: '2024-01-20 11:00:00',
    },
    {
      id: 'API-004',
      name: '修改数据产品',
      path: '/api/v1/products/{id}',
      method: 'PUT',
      description: '更新指定数据产品的信息',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 11:30:00',
      updateTime: '2024-01-20 14:20:00',
    },
    {
      id: 'API-005',
      name: '新增数据资源',
      path: '/api/v1/resources',
      method: 'POST',
      description: '创建新的数据资源',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 13:00:00',
      updateTime: '2024-01-20 13:00:00',
    },
    {
      id: 'API-006',
      name: '修改数据资源',
      path: '/api/v1/resources/{id}',
      method: 'PUT',
      description: '更新指定数据资源的信息',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 13:30:00',
      updateTime: '2024-01-20 16:15:00',
    },
    {
      id: 'API-007',
      name: '新增交易合同',
      path: '/api/v1/contracts',
      method: 'POST',
      description: '创建新的交易合同',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 14:00:00',
      updateTime: '2024-01-20 14:00:00',
    },
    {
      id: 'API-008',
      name: '修改交易合同',
      path: '/api/v1/contracts/{id}',
      method: 'PUT',
      description: '更新指定交易合同的信息',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 14:30:00',
      updateTime: '2024-01-20 17:45:00',
    },
    {
      id: 'API-009',
      name: '获取连接器列表',
      path: '/api/v1/connectors',
      method: 'GET',
      description: '获取所有连接器的列表',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 15:00:00',
      updateTime: '2024-01-20 15:00:00',
    },
    {
      id: 'API-010',
      name: '获取数据产品列表',
      path: '/api/v1/products',
      method: 'GET',
      description: '获取所有数据产品的列表',
      status: 'online',
      version: 'v1.0.0',
      createTime: '2024-01-20 15:30:00',
      updateTime: '2024-01-20 15:30:00',
    },
  ];

  return (
    <div style={{ paddingTop: '20px' }}>
      <Card bordered={false}>
        <Form
          form={form}
          layout="inline"
          style={{ marginBottom: '24px' }}
          onFinish={handleSearch}
        >
          <Form.Item name="id" label="接口ID">
            <Input placeholder="请输入接口ID" />
          </Form.Item>
          <Form.Item name="name" label="接口名称">
            <Input placeholder="请输入接口名称" />
          </Form.Item>
          <Form.Item name="method" label="请求方式">
            <Select placeholder="请选择请求方式" style={{ width: 120 }}>
              <Option value="GET">GET</Option>
              <Option value="POST">POST</Option>
              <Option value="PUT">PUT</Option>
              <Option value="DELETE">DELETE</Option>
            </Select>
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Select placeholder="请选择状态" style={{ width: 120 }}>
              <Option value="online">已发布</Option>
              <Option value="offline">未发布</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button onClick={handleReset}>重置</Button>
            </Space>
          </Form.Item>
        </Form>

        <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'flex-end' }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
            新增接口
          </Button>
        </div>

        <Table<InterfaceRecord>
          columns={columns}
          dataSource={mockData}
          rowKey="id"
          scroll={{ x: 1800 }}
          pagination={{
            total: mockData.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条记录`,
          }}
        />

        <Modal
          title={`${editingRecord ? '编辑' : '新增'}接口`}
          open={modalVisible}
          onOk={handleModalOk}
          onCancel={() => setModalVisible(false)}
          width={800}
        >
          <Form
            form={modalForm}
            layout="vertical"
            style={{ marginTop: '24px' }}
          >
            <Tabs defaultActiveKey="1">
              <TabPane tab="基本信息" key="1">
                <Form.Item
                  name="name"
                  label="接口名称"
                  rules={[{ required: true, message: '请输入接口名称' }]}
                >
                  <Input placeholder="请输入接口名称" />
                </Form.Item>
                <Form.Item
                  name="path"
                  label="接口路径"
                  rules={[{ required: true, message: '请输入接口路径' }]}
                >
                  <Input placeholder="请输入接口路径，例如：/api/v1/users/{id}" />
                </Form.Item>
                <Form.Item
                  name="method"
                  label="请求方式"
                  rules={[{ required: true, message: '请选择请求方式' }]}
                >
                  <Select placeholder="请选择请求方式">
                    <Option value="GET">GET</Option>
                    <Option value="POST">POST</Option>
                    <Option value="PUT">PUT</Option>
                    <Option value="DELETE">DELETE</Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  name="description"
                  label="接口描述"
                  rules={[{ required: true, message: '请输入接口描述' }]}
                >
                  <TextArea rows={4} placeholder="请输入接口描述" />
                </Form.Item>
                <Form.Item
                  name="version"
                  label="版本号"
                  rules={[{ required: true, message: '请输入版本号' }]}
                >
                  <Input placeholder="请输入版本号，例如：v1.0.0" />
                </Form.Item>
              </TabPane>
              <TabPane tab="请求参数" key="2">
                <Form.Item
                  name="requestParams"
                  label="请求参数"
                >
                  <Table
                    columns={[
                      { title: '参数名', dataIndex: 'name', key: 'name' },
                      { title: '参数类型', dataIndex: 'type', key: 'type' },
                      { title: '是否必填', dataIndex: 'required', key: 'required' },
                      { title: '示例值', dataIndex: 'example', key: 'example' },
                      { title: '描述', dataIndex: 'description', key: 'description' },
                    ]}
                    dataSource={[]}
                    pagination={false}
                    size="small"
                  />
                </Form.Item>
              </TabPane>
              <TabPane tab="响应参数" key="3">
                <Form.Item
                  name="responseParams"
                  label="响应参数"
                >
                  <Table
                    columns={[
                      { title: '参数名', dataIndex: 'name', key: 'name' },
                      { title: '参数类型', dataIndex: 'type', key: 'type' },
                      { title: '示例值', dataIndex: 'example', key: 'example' },
                      { title: '描述', dataIndex: 'description', key: 'description' },
                    ]}
                    dataSource={[]}
                    pagination={false}
                    size="small"
                  />
                </Form.Item>
              </TabPane>
            </Tabs>
          </Form>
        </Modal>
      </Card>
    </div>
  );
};

export default InterfaceManagement;